<template>
  <div class="register-add">
    <h2 class="page-title">设备登记添加</h2>
    <div class="add">
      <el-form
        :model="detail"
        label-width="80px"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="detail.name"></el-input>
        </el-form-item>
        <el-form-item label="设备分类" prop="category">
          <el-select v-model="detail.category">
            <el-option
              v-for="d in $store.state.categoryList"
              :key="d.id"
              :label="d.name"
              :value="d.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备数量" prop="number">
          <el-input v-model="detail.number"></el-input>
        </el-form-item>
        <el-form-item label="设备价格" prop="price">
          <el-input v-model="detail.price"></el-input>
        </el-form-item>
        <el-form-item label="购置日期" prop="time">
          <el-date-picker
            v-model="detail.time"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="btn-list">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button @click="$router.back()">返回列表</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        name: [
          {
            required: true,
            message: "请填写设备名称",
            trigger: "blur",
          },
        ],
        number: [
          {
            required: true,
            message: "请填写设备数量",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (/^[1-9]\d*$/.test(value)) {
                callback();
              } else {
                callback(new Error("设备数量必须为正整数"));
              }
            },
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请填写设备价格",
            trigger: "blur",
          },
        ],
        time: [
          {
            required: true,
            message: "设置购置日期",
            trigger: "change",
          },
        ],
      },
      detail: {
        name: "",
        category: "",
        price: "",
        number: "",
        time: "",
      },
    };
  },

  methods: {
    getDatail() {
      this.axios.get("/pre-detail?id=" + this.id).then((data) => {
        if (!data.code) {
          const d = data.data;
          this.detail = {
            name: d.name,
            category: d.category,
            number: d.number,
            price: d.price,
            time: d.time,
          };
        }
      });
    },
    submit(){
      this.$refs.form.validate(valid=>{
        if(!valid) return;
        this.axios.post('/pre-add',{
          ...this.detail
        }).then(data=>{
          if(!data.code) {
            this.$message.success('添加成功')
            this.$router.push('/main/register/list')
          }
        })
      })
    }
  },
};
</script>
<style lang="sass" scoped>
.register-add
  padding: 0 30px 30px
  .add
    padding: 0 20px 20px 20px
    background: #f0f0f0
    border-radius: 4px
    .el-form
      width: 300px
      padding-top: 30px
      .el-select
        width: 100%
</style>
